<template>
  <div>
    <div class="table" >
      <section class="sec-table">
        <table border="1">
          <caption>{{tableCaption}}</caption>
          <tbody v-for="item in carMessage">
          <tr>
            <td  colspan="2">
              <div class="sec-table__input"></div>{{item.title}}
            </td>
          </tr>
          <tr v-for="v in item.message">
            <td nowrap="nowrap">{{v.name}}</td>
            <td v-html="v.message" class="center" >{{v.message}}</td>
          </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        dot:{
        width: "10px",
        height: "10px",
        marginLeft:"auto",
        borderRadius: "10px",
        background: "#fff"
      }
      }
    },
    props: {
      tableCaption: String,
      carMessage: Array
    },
    components: {}
  }
</script>
<style scoped lang="scss">
  caption {
    color: white;
    background: #1b1e1d;
    font-size: 43px;
    margin-bottom: 12px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    tr {
      width: 100%;
      color: #aeaeae;
      &:nth-child(2n + 1) {
        background: #373838;
      }
      &:nth-child(2n) {
        background: #2c2d2d;
      }
      td {
        font-size: 25px;
        color: white;
        padding: 9px 23px;
        height: 47px;

      }
      .center{
        text-align: center;
        vertical-align: center;
      }
    }
  }
  .table {
    width: 100%;
    .sec-table {
      width: 100%;
      padding: 0 35px;
      background: black;
      box-sizing: border-box;
      .sec-table__input {
        display: inline-block;
        width: 22px;
        height: 20px;
        background: #fff;
        margin-right:4px ;
      }

    }

  }
</style>
